<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="header">
        <h3>首页</h3>
        <div style="display:none;">
            <span>xxx</span>
            <button class="btn-logout">退出</button>
        </div>
    </header>



    <script src="./cookie/cookie.js"></script>
    <script>
        // 要求:
            // 如果发现存在用户信息的cookie,直接显示首页
            // 如果没有发现存在用户的cookie,就跳转到登录页
            // 点击 "退出" 按钮,可以删除用户的cookie,跳转登录页

        // 思考：
            // 控制哪些标签
            // 如何退出登录

        // 编码:
        // 编写函数 初始化页面
        var init = function(){
            // 1. 获取页面相关的标签
           var div = document.querySelector(".header > div");
           var span = document.querySelector(".header > div span");
           var btnLogout = document.querySelector(".btn-logout");

           // 2. 判断是否存在用户的唯一的标记
           if(getCookie("_userid")){
                // 显示用户名称
                if(getCookie("_username")){
                    span.innerText = getCookie("_username");
                }
                // 显示div标签
                div.style["display"] = "block";
           }else {
                // 如果没有发现用户的信息 就返回登录页面
                var d = setTimeout(function(){
                    clearTimeout(d);
                    location.href = "./login.html";
                },300)
           }

           //3. 事件绑定
           btnLogout.onclick = function() {
                // 删除用户唯一的标记
                removeCookie("_userid");
                // 执行延迟函数
                var delay = setTimeout(function(){
                    clearTimeout(delay);
                    location.href = "./login.html";
                },300)
           }
        }
        // 调用函数
        init()
    </script>
</body>
</html>